<!DOCTYPE html>
<html lang="en">
{% if messages %}
    <script>
        {% for message in messages %}
        	alert('{{ message }}')
        {% endfor %}
    </script>
{% endif %}
<head>


    <meta charset="utf-8">
    <title>大数据招聘数据分析系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description">
    <meta content="" name="author">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link href="/static/static/css/datatable.css" rel="stylesheet" type="text/css">
    <!-- App css -->
    <link href="/static/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/icons.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/app.min.css" rel="stylesheet" type="text/css">

</head>

<body id="body" class="dark-sidebar">
<!-- leftbar-tab-menu -->
<div class="left-sidebar">
    <!-- LOGO -->
    <div class="brand">
        <a href="" class="logo">
                    <span>
                        <img src="/static/static/picture/logo-sm.png" alt="logo-small" class="logo-sm">
                    </span>
            <span>
{#                        <img src="/static/static/picture/logo.png" alt="logo-large" class="logo-lg logo-light">#}
{#                        <img src="/static/static/picture/logo-dark.png" alt="logo-large" class="logo-lg logo-dark">#}
                        <span style="color: #fff">招聘数据分析可视化系统</span>
                    </span>
        </a>
    </div>
    <div class="sidebar-user-pro media border-end">
        <div class="position-relative mx-auto">
            <img src="/static/static/picture/user-4.jpg" alt="user" class="rounded-circle thumb-md">
            <span class="online-icon position-absolute end-0"><i class="mdi mdi-record text-success"></i></span>
        </div>
        <div class="media-body ms-2 user-detail align-self-center">
            <h5 class="font-14 m-0 fw-bold">{{ userInfo.username }}</h5>
            <p class="opacity-50 mb-0">用户名</p>
        </div>
    </div>
    <div class="border-end">
        <ul class="nav nav-tabs menu-tab nav-justified" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#Main" role="tab"
                   aria-selected="true"><span>主导航</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#Extra" role="tab"
                   aria-selected="false"><span>更多</span></a>
            </li>
        </ul>
    </div>
    <!-- Tab panes -->

    <!--end logo-->
    <div class="menu-content h-100" data-simplebar="">
        <div class="menu-body navbar-vertical">
            <div class="collapse navbar-collapse tab-content" id="sidebarCollapse">
                <!-- Navigation -->
                <ul class="navbar-nav tab-pane active" id="Main" role="tabpanel">
                    <li class="menu-label mt-0 text-primary font-12 fw-semibold"><span>导航栏</span><br><span
                            class="font-10 text-secondary fw-normal">Unique Dashboard</span></li>
                    <li class="nav-item">
                        <a class="nav-link" href="#sidebarAnalytics" data-bs-toggle="collapse" role="button"
                           aria-expanded="false" aria-controls="sidebarAnalytics">
                            <i class="ti ti-stack menu-icon"></i>
                            <span>数据可视化</span>
                        </a>
                        <div class="collapse " id="sidebarAnalytics">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/salaryChar/">薪资分析</a>
                                </li><!--end nav-item-->
                                <li class="nav-item">
                                    <a href="/myApp/educationChar/" class="nav-link ">经验学历分析</a>
                                </li><!--end nav-item-->
                                <li class="nav-item">
                                    <a href="/myApp/industryChar/" class="nav-link ">职业分析</a>
                                <li class="nav-item">
                                    <a href="/myApp/cityChar/" class="nav-link ">城市分析</a>
                                </li><!--end nav-item-->
                            </ul><!--end nav-->
                        </div><!--end sidebarAnalytics-->
                    </li><!--end nav-item-->

                    <li class="nav-item">
                        <a class="nav-link" href="#sidebarCrypto" data-bs-toggle="collapse" role="button"
                           aria-expanded="false" aria-controls="sidebarCrypto">
                            <i class="ti ti-forms menu-icon"></i>
                            <span>数据表格</span>
                        </a>
                        <div class="collapse " id="sidebarCrypto">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/tableData/">工作职位数据</a>
                                </li><!--end nav-item-->
                            </ul><!--end nav-->
                        </div><!--end sidebarCrypto-->
                    </li><!--end nav-item-->

                    <li class="nav-item">
                        <a class="nav-link" href="#sidebarProjectsA" data-bs-toggle="collapse" role="button"
                           aria-expanded="false" aria-controls="sidebarProjects">
                            <i class="ti ti-user menu-icon"></i>
                            <span>个人信息</span>
                        </a>
                        <div class="collapse " id="sidebarProjectsA">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/changeInfo/">信息管理</a>
                                </li><!--end nav-item-->
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/collectData/">收藏数据</a>
                                </li><!--end nav-item-->
                            </ul><!--end nav-->
                        </div><!--end sidebarProjects-->
                    </li><!--end nav-item-->
                    <li class="nav-item">
                        <a class="nav-link" href="#sidebarProjectsB" data-bs-toggle="collapse" role="button"
                           aria-expanded="false" aria-controls="sidebarProjects">
                            <i class="ti ti-cloud menu-icon"></i>
                            <span>数据词云图</span>
                        </a>
                        <div class="collapse " id="sidebarProjectsB">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/titleCloud/">工作词云图</a>
                                </li><!--end nav-item-->
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/tagCloud/">工作标签词云图</a>
                                </li><!--end nav-item-->
                            </ul><!--end nav-->
                        </div><!--end sidebarProjects-->
                    </li><!--end nav-item-->
                    <li class="nav-item">
                        <a class="nav-link" href="#sidebarProjectsC" data-bs-toggle="collapse" role="button"
                           aria-expanded="false" aria-controls="sidebarProjects">
                            <i class="ti ti-star menu-icon"></i>
                            <span>职位推荐</span>
                        </a>
                        <div class="collapse " id="sidebarProjectsC">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/recommendPage/">职位推荐</a>
                                </li><!--end nav-item-->
                            </ul><!--end nav-->
                        </div><!--end sidebarProjects-->
                    </li><!--end nav-item-->

                </ul>
                <ul class="navbar-nav tab-pane" id="Extra" role="tabpanel">
                    <li>
                        <div class="update-msg text-center position-relative">
                            <button type="button" class="btn-close position-absolute end-0 me-2"
                                    aria-label="Close"></button>
                            <img src="/static/static/picture/speaker-light.png" alt="" class="" height="110">
                            <h5 class="mt-0">更多信息</h5>
                            <p class="mb-3">请访问BOSS直聘官网</p>
                            <a href="https://www.zhipin.com/" class="btn btn-outline-warning btn-sm">访问</a>
                        </div>
                    </li>
                </ul><!--end navbar-nav--->
            </div><!--end sidebarCollapse-->
        </div>
    </div>
</div>
<!-- end left-sidenav-->
<!-- end leftbar-menu-->

<!-- Top Bar Start -->
<!-- Top Bar Start -->
<div class="topbar">
    <!-- Navbar -->
    <nav class="navbar-custom" id="navbar-custom">
        <ul class="list-unstyled topbar-nav float-end mb-0">
            {#                    <li class="dropdown">#}
            {#                        <a class="nav-link dropdown-toggle arrow-none nav-icon" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">#}
            {#                        <img src="/static/static/picture/us_flag.jpg" alt="" class="thumb-xxs rounded">#}
            {#                    </a>#}
            {#                        <div class="dropdown-menu">#}
            {#                            <a class="dropdown-item" href="#"><img src="/static/static/picture/us_flag.jpg" alt="" height="15" class="me-2">English</a>#}
            {#                            <a class="dropdown-item" href="#"><img src="/static/static/picture/spain_flag.jpg" alt="" height="15" class="me-2">Spanish</a>#}
            {#                            <a class="dropdown-item" href="#"><img src="/static/static/picture/germany_flag.jpg" alt="" height="15" class="me-2">German</a>#}
            {#                            <a class="dropdown-item" href="#"><img src="/static/static/picture/french_flag.jpg" alt="" height="15" class="me-2">French</a>#}
            {#                        </div>#}
            {#                    </li><!--end topbar-language-->#}
            {#            #}
            {#                    <li class="dropdown notification-list">#}
            {#                        <a class="nav-link dropdown-toggle arrow-none nav-icon" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">#}
            {#                            <i class="ti ti-mail"></i>#}
            {#                        </a>#}
            {#                        <div class="dropdown-menu dropdown-menu-end dropdown-lg pt-0">#}
            {#                #}
            {#                            <h6 class="dropdown-item-text font-15 m-0 py-3 border-bottom d-flex justify-content-between align-items-center">#}
            {#                                Emails <span class="badge bg-soft-primary badge-pill">3</span>#}
            {#                            </h6> #}
            {#                            <div class="notification-menu" data-simplebar="">#}
            {#                                <!-- item-->#}
            {#                                <a href="#" class="dropdown-item py-3">#}
            {#                                    <small class="float-end text-muted ps-2">2 min ago</small>#}
            {#                                    <div class="media">#}
            {#                                        <div class="avatar-md bg-soft-primary">#}
            {#                                            <img src="/static/static/picture/user-1.jpg" alt="" class="thumb-sm rounded-circle">#}
            {#                                        </div>#}
            {#                                        <div class="media-body align-self-center ms-2 text-truncate">#}
            {#                                            <h6 class="my-0 fw-normal text-dark">Your order is placed</h6>#}
            {#                                            <small class="text-muted mb-0">Dummy text of the printing and industry.</small>#}
            {#                                        </div><!--end media-body-->#}
            {#                                    </div><!--end media-->#}
            {#                                </a><!--end-item-->#}
            {#                                <!-- item-->#}
            {#                                <a href="#" class="dropdown-item py-3">#}
            {#                                    <small class="float-end text-muted ps-2">10 min ago</small>#}
            {#                                    <div class="media">#}
            {#                                        <div class="avatar-md bg-soft-primary">#}
            {#                                            <img src="/static/static/picture/user-4.jpg" alt="" class="thumb-sm rounded-circle">#}
            {#                                        </div>#}
            {#                                        <div class="media-body align-self-center ms-2 text-truncate">#}
            {#                                            <h6 class="my-0 fw-normal text-dark">Meeting with designers</h6>#}
            {#                                            <small class="text-muted mb-0">It is a long established fact that a reader.</small>#}
            {#                                        </div><!--end media-body-->#}
            {#                                    </div><!--end media-->#}
            {#                                </a><!--end-item-->#}
            {#                                <!-- item-->#}
            {#                                <a href="#" class="dropdown-item py-3">#}
            {#                                    <small class="float-end text-muted ps-2">40 min ago</small>#}
            {#                                    <div class="media">#}
            {#                                        <div class="avatar-md bg-soft-primary">#}
            {#                                            <img src="/static/static/picture/user-2.jpg" alt="" class="thumb-sm rounded-circle">#}
            {#                                        </div>#}
            {#                                        <div class="media-body align-self-center ms-2 text-truncate">#}
            {#                                            <h6 class="my-0 fw-normal text-dark">UX 3 Task complete.</h6>#}
            {#                                            <small class="text-muted mb-0">Dummy text of the printing.</small>#}
            {#                                        </div><!--end media-body-->#}
            {#                                    </div><!--end media-->#}
            {#                                </a><!--end-item-->#}
            {#                                <!-- item-->#}
            {#                                <a href="#" class="dropdown-item py-3">#}
            {#                                    <small class="float-end text-muted ps-2">1 hr ago</small>#}
            {#                                    <div class="media">#}
            {#                                        <div class="avatar-md bg-soft-primary">#}
            {#                                            <img src="/static/static/picture/user-5.jpg" alt="" class="thumb-sm rounded-circle">#}
            {#                                        </div>#}
            {#                                        <div class="media-body align-self-center ms-2 text-truncate">#}
            {#                                            <h6 class="my-0 fw-normal text-dark">Your order is placed</h6>#}
            {#                                            <small class="text-muted mb-0">It is a long established fact that a reader.</small>#}
            {#                                        </div><!--end media-body-->#}
            {#                                    </div><!--end media-->#}
            {#                                </a><!--end-item-->#}
            {#                                <!-- item-->#}
            {#                                <a href="#" class="dropdown-item py-3">#}
            {#                                    <small class="float-end text-muted ps-2">2 hrs ago</small>#}
            {#                                    <div class="media">#}
            {#                                        <div class="avatar-md bg-soft-primary">#}
            {#                                            <img src="/static/static/picture/user-3.jpg" alt="" class="thumb-sm rounded-circle">#}
            {#                                        </div>#}
            {#                                        <div class="media-body align-self-center ms-2 text-truncate">#}
            {#                                            <h6 class="my-0 fw-normal text-dark">Payment Successfull</h6>#}
            {#                                            <small class="text-muted mb-0">Dummy text of the printing.</small>#}
            {#                                        </div><!--end media-body-->#}
            {#                                    </div><!--end media-->#}
            {#                                </a><!--end-item-->#}
            {#                            </div>#}
            {#                            <!-- All-->#}
            {#                            <a href="javascript:void(0);" class="dropdown-item text-center text-primary">#}
            {#                                View all <i class="fi-arrow-right"></i>#}
            {#                            </a>#}
            {#                        </div>#}
            {#                    </li>#}
            {##}
            {#                    <li class="dropdown notification-list">#}
            {#                        <a class="nav-link dropdown-toggle arrow-none nav-icon" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">#}
            {#                            <i class="ti ti-bell"></i>#}
            {#                            <span class="alert-badge"></span>#}
            {#                        </a>#}
            {#                        <div class="dropdown-menu dropdown-menu-end dropdown-lg pt-0">#}
            {#                #}
            {#                            <h6 class="dropdown-item-text font-15 m-0 py-3 border-bottom d-flex justify-content-between align-items-center">#}
            {#                                Notifications <span class="badge bg-soft-primary badge-pill">2</span>#}
            {#                            </h6> #}
            {#                            <div class="notification-menu" data-simplebar="">#}
            {#                                <!-- item-->#}
            {#                                <a href="#" class="dropdown-item py-3">#}
            {#                                    <small class="float-end text-muted ps-2">2 min ago</small>#}
            {#                                    <div class="media">#}
            {#                                        <div class="avatar-md bg-soft-primary">#}
            {#                                            <i class="ti ti-chart-arcs"></i>#}
            {#                                        </div>#}
            {#                                        <div class="media-body align-self-center ms-2 text-truncate">#}
            {#                                            <h6 class="my-0 fw-normal text-dark">Your order is placed</h6>#}
            {#                                            <small class="text-muted mb-0">Dummy text of the printing and industry.</small>#}
            {#                                        </div><!--end media-body-->#}
            {#                                    </div><!--end media-->#}
            {#                                </a><!--end-item-->#}
            {#                                <!-- item-->#}
            {#                                <a href="#" class="dropdown-item py-3">#}
            {#                                    <small class="float-end text-muted ps-2">10 min ago</small>#}
            {#                                    <div class="media">#}
            {#                                        <div class="avatar-md bg-soft-primary">#}
            {#                                            <i class="ti ti-device-computer-camera"></i>#}
            {#                                        </div>#}
            {#                                        <div class="media-body align-self-center ms-2 text-truncate">#}
            {#                                            <h6 class="my-0 fw-normal text-dark">Meeting with designers</h6>#}
            {#                                            <small class="text-muted mb-0">It is a long established fact that a reader.</small>#}
            {#                                        </div><!--end media-body-->#}
            {#                                    </div><!--end media-->#}
            {#                                </a><!--end-item-->#}
            {#                                <!-- item-->#}
            {#                                <a href="#" class="dropdown-item py-3">#}
            {#                                    <small class="float-end text-muted ps-2">40 min ago</small>#}
            {#                                    <div class="media">#}
            {#                                        <div class="avatar-md bg-soft-primary">                                                    #}
            {#                                            <i class="ti ti-diamond"></i>#}
            {#                                        </div>#}
            {#                                        <div class="media-body align-self-center ms-2 text-truncate">#}
            {#                                            <h6 class="my-0 fw-normal text-dark">UX 3 Task complete.</h6>#}
            {#                                            <small class="text-muted mb-0">Dummy text of the printing.</small>#}
            {#                                        </div><!--end media-body-->#}
            {#                                    </div><!--end media-->#}
            {#                                </a><!--end-item-->#}
            {#                                <!-- item-->#}
            {#                                <a href="#" class="dropdown-item py-3">#}
            {#                                    <small class="float-end text-muted ps-2">1 hr ago</small>#}
            {#                                    <div class="media">#}
            {#                                        <div class="avatar-md bg-soft-primary">#}
            {#                                            <i class="ti ti-drone"></i>#}
            {#                                        </div>#}
            {#                                        <div class="media-body align-self-center ms-2 text-truncate">#}
            {#                                            <h6 class="my-0 fw-normal text-dark">Your order is placed</h6>#}
            {#                                            <small class="text-muted mb-0">It is a long established fact that a reader.</small>#}
            {#                                        </div><!--end media-body-->#}
            {#                                    </div><!--end media-->#}
            {#                                </a><!--end-item-->#}
            {#                                <!-- item-->#}
            {#                                <a href="#" class="dropdown-item py-3">#}
            {#                                    <small class="float-end text-muted ps-2">2 hrs ago</small>#}
            {#                                    <div class="media">#}
            {#                                        <div class="avatar-md bg-soft-primary">#}
            {#                                            <i class="ti ti-users"></i>#}
            {#                                        </div>#}
            {#                                        <div class="media-body align-self-center ms-2 text-truncate">#}
            {#                                            <h6 class="my-0 fw-normal text-dark">Payment Successfull</h6>#}
            {#                                            <small class="text-muted mb-0">Dummy text of the printing.</small>#}
            {#                                        </div><!--end media-body-->#}
            {#                                    </div><!--end media-->#}
            {#                                </a><!--end-item-->#}
            {#                            </div>#}
            {#                            <!-- All-->#}
            {#                            <a href="javascript:void(0);" class="dropdown-item text-center text-primary">#}
            {#                                View all <i class="fi-arrow-right"></i>#}
            {#                            </a>#}
            {#                        </div>#}
            {#                    </li>#}

            <li class="dropdown">
                <a class="nav-link dropdown-toggle nav-user" data-bs-toggle="dropdown" href="#" role="button"
                   aria-haspopup="false" aria-expanded="false">
                    <div class="d-flex align-items-center">
                        <img src="/static/static/picture/user-4.jpg" alt="profile-user"
                             class="rounded-circle me-2 thumb-sm">
                        <div>
                            <small class="d-none d-md-block font-11">{{ userInfo.username }}</small>
                            <span class="d-none d-md-block fw-semibold font-12">用户 <i
                                    class="mdi mdi-chevron-down"></i></span>
                        </div>
                    </div>
                </a>
                <div class="dropdown-menu dropdown-menu-end">
                    <a class="dropdown-item" href="#"><i class="ti ti-user font-16 me-1 align-text-bottom"></i> 个人信息</a>
                    <a class="dropdown-item" href="/myApp/home/"><i
                            class="ti ti-chart-area-line font-16 me-1 align-text-bottom"></i> 可视化大屏</a>
                    <div class="dropdown-divider mb-0"></div>
                    <a class="dropdown-item" href="/myApp/logOut"><i
                            class="ti ti-power font-16 me-1 align-text-bottom"></i> 退出登录</a>
                </div>
            </li><!--end topbar-profile-->
            {#                    <li class="notification-list">#}
            {#                        <a class="nav-link arrow-none nav-icon offcanvas-btn" href="#" data-bs-toggle="offcanvas" data-bs-target="#Appearance" role="button" aria-controls="Rightbar">#}
            {#                            <i class="ti ti-settings ti-spin"></i>#}
            {#                        </a>#}
            {#                    </li>   #}
        </ul><!--end topbar-nav-->

        <ul class="list-unstyled topbar-nav mb-0">
            <li>
                <button class="nav-link button-menu-mobile nav-icon" id="togglemenu">
                    <i class="ti ti-menu-2"></i>
                </button>
            </li>
            {#                    <li class="hide-phone app-search">#}
            {#                        <form role="search" action="#" method="get">#}
            {#                            <input type="search" name="search" class="form-control top-search mb-0" placeholder="Type text...">#}
            {#                            <button type="submit"><i class="ti ti-search"></i></button>#}
            {#                        </form>#}
            {#                    </li>                       #}
        </ul>
    </nav>
    <!-- end navbar-->
</div>
<!-- Top Bar End -->
<!-- Top Bar End -->

<div class="page-wrapper">

    <!-- Page Content-->
    <div class="page-content-tab">

        <div class="container-fluid">
            <!-- Page-Title -->
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-title-box">
                        <div class="float-end">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#">系统</a>
                                </li><!--end nav-item-->
                                <li class="breadcrumb-item"><a href="#">个人信息</a>
                                </li><!--end nav-item-->
                                <li class="breadcrumb-item active">信息管理</li>
                            </ol>
                        </div>
                        <h4 class="page-title">信息管理</h4>
                    </div><!--end page-title-box-->
                </div><!--end col-->
            </div>
            <!-- end page title end breadcrumb -->


            <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">表格数据</h4>
                            </div><!--end card-header-->
                            <div class="card-body">
                                <form action="/myApp/changeInfo/" method="POST"> <div class="mb-3 row">
                                            <label for="example-text-input" class="col-sm-2 col-form-label text-end">用户名</label>
                                            <div class="col-sm-10">
                                                <input disabled class="form-control" type="text" value="{{ userInfo.username }}" id="example-text-input">
                                            </div>
                                        </div>
                                <div class="mb-3 row">
                                            <label for="example-text-input" class="col-sm-2 col-form-label text-end">原密码</label>
                                            <div class="col-sm-10">
                                                <input name="oldPassword" class="form-control" type="password" value="" id="example-text-input">
                                            </div>
                                        </div>
                                <div class="mb-3 row">
                                            <label for="example-text-input" class="col-sm-2 col-form-label text-end">新密码</label>
                                            <div class="col-sm-10">
                                                <input name="newPassword" class="form-control" type="password" value="" id="example-text-input">
                                            </div>
                                        </div>
                                <div class="mb-3 row">
                                            <label for="example-text-input" class="col-sm-2 col-form-label text-end">确认密码</label>
                                            <div class="col-sm-10">
                                                <input name="chkPassword" class="form-control" type="password" value="" id="example-text-input">
                                            </div>
                                        </div>
                                    <div class="mb-3 row">
                                        <label for="example-text-input" class="col-sm-2 col-form-label text-end"></label>
                                        <div class="col-sm-2">
                                            <button type="submit" class="btn btn-primary">提交</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div> <!-- end col -->
                </div> <!-- end row -->


        </div><!-- container -->

        <!--Start Rightbar-->
        <!--Start Rightbar/offcanvas-->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="Appearance" aria-labelledby="AppearanceLabel">
            <div class="offcanvas-header border-bottom">
                <h5 class="m-0 font-14" id="AppearanceLabel">Appearance</h5>
                <button type="button" class="btn-close text-reset p-0 m-0 align-self-center" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <h6>Account Settings</h6>
                <div class="p-2 text-start mt-3">
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="settings-switch1">
                        <label class="form-check-label" for="settings-switch1">Auto updates</label>
                    </div><!--end form-switch-->
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="settings-switch2" checked="">
                        <label class="form-check-label" for="settings-switch2">Location Permission</label>
                    </div><!--end form-switch-->
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="settings-switch3">
                        <label class="form-check-label" for="settings-switch3">Show offline Contacts</label>
                    </div><!--end form-switch-->
                </div><!--end /div-->
                <h6>General Settings</h6>
                <div class="p-2 text-start mt-3">
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="settings-switch4">
                        <label class="form-check-label" for="settings-switch4">Show me Online</label>
                    </div><!--end form-switch-->
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="settings-switch5" checked="">
                        <label class="form-check-label" for="settings-switch5">Status visible to all</label>
                    </div><!--end form-switch-->
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="settings-switch6">
                        <label class="form-check-label" for="settings-switch6">Notifications Popup</label>
                    </div><!--end form-switch-->
                </div><!--end /div-->
            </div><!--end offcanvas-body-->
        </div>
        <!--end Rightbar/offcanvas-->
        <!--end Rightbar-->

        <!--Start Footer-->
        <!-- Footer Start -->
        {#                <footer class="footer text-center text-sm-start">Copyright &copy; 2022.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></footer>#}
        <!-- end Footer -->
        <!--end footer-->
    </div>
    <!-- end page content -->
</div>
<!-- end page-wrapper -->

<!-- Javascript  -->

<script src="/static/static/js/apexcharts.min.js"></script>
<script src="/static/static/js/analytics-index.init.js"></script>


<!-- App js -->
<script src="/static/static/js/app.js"></script>

</body>
<!--end body-->
<script src="/static/static/js/echarts.js"></script>
    <!-- Javascript  -->
    <script src="/static/static/js/simple-datatables.js"></script>
    <script src="/static/static/js/datatable.init.js"></script>
</html>